<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="icon" href="https://www.bilibili.com/favicon.ico">
    <style>
        #root {
            width: 500px;
            margin: 200px auto;
            text-align: center;
        }

        [v-cloak] {
            color: red;
        }

    </style>
</head>

<body>
    <div id="root">
        <!-- v-text，使标签内部文字换成特定内容，类似innertext， -->
        <!-- v-html，解析html标签，存在安全性问题，类似innerhtml -->
        <!-- v-cloak，一种特殊指令，没有val，会在vue接管的时候删除，配合css[v-cloak]:{display:none}解决页面加载慢时出现插值语法的问题 -->
        <!-- v-once，同样没有值，它接管的节点旨在初始渲染一次，然后便视作静态内容不再更改 -->
        <!-- v-pre，没有值，指所在节点不参与编译，可用于优化性能 -->
        <span v-text='Text'></span><br>
        <span v-html='html'></span><br>
        <span v-cloak>加载中，请稍后...</span><br>
        <button v-once @click="changeTime">{{once}}指挥参与渲染一次，后面不做修改</button><br>
        <span v-pre>{{不参与编译}}</span>
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            data: {
                Text: "v-text指令",
                // html:"<a href=javascript:console.log(document.cookie)>v-html代码注入</a>"
                html: "<a href=javascript:alert('v-html有安全漏洞')>v-html代码注入</a>",
                once: new Date().getSeconds()
            },
            computed: {},
            watch: {},
            methods: {
                changeTime() {
                    let t = new Date().getSeconds()
                    console.log(t);
                    this.once = t
                }
            },
        })
        setTimeout(() => {
            vm.$mount("#root")
        }, 1E3);
    </script>
</body>

</html>
